<template>
	<view class="default-background">
		<view class="detail-page">
			<view class="house-info">
				<view class="close-btn">
					<uni-icons type="closeempty" size="30" @click="back()"></uni-icons>
				</view>
				<view class="display-bar" v-if="!house.isDisplay || house.isBan">已下架</view>
				<view class="house-title">{{house.title}}</view>
				<view class="house-user" @click="toHomePage(house.userId)">{{house.username}}</view>
				<view class="info-item" v-if="house.introduce">
					<view class="info-title">简介：</view>
					<view class="info-input">{{house.introduce}}</view>
				</view>
				<view class="info-item">
					<view class="info-title" v-if="house.type==0">租金：{{house.price}}元/每月</view>
					<view class="info-title" v-if="house.type==1">售价：{{house.price}}元</view>
				</view>
				<view class="info-item">
					<view class="info-title">房间格局：{{house.room}}房{{house.parlor}}厅{{house.lavatory}}卫</view>
				</view>
				<view class="info-item">
					<view class="info-title">详细位置：{{house.district}}{{house.address}}</view>
				</view>
				<pf-img v-for="(url, index) in house.pic" :src="url" @click.native="getImg(index)"></pf-img>
				<!-- <image v-for="(url, index) in house.pic" :src="url" class="house-pic" mode="aspectFill" @click="getImg(index)"></image> -->
				<view class="report-box">
					<view class="report-btn" @click="showModal()" v-if="house.isDisplay && !house.isBan">举报</view>
				</view>
			</view>
		</view>
		<view v-if="isShowModal">
			<view class="masking" v-if="showMasking" :style="{'background-color': bgColor}"></view>
				<view class="model-wraper">
				<view class="modal-title" v-if="modalTitle !== ''">
					{{modalTitle}}
				</view>
				<view class="modal-body">
					<textarea v-model="reportReason" style="padding: 10rpx;font-size: 30rpx;width: 100%;max-height: 150rpx;" class="uni-input" focus placeholder="请输入举报理由" >
						
					</textarea>
				</view>
				<view>
					<view class="btn cancel" :style="{'color': cancelTextColor}" @click="handleCancel()">{{cancelText}}</view>
					<view class="btn confirm" :style="{'color': confirmTextColor}" @click="handleConfirm()">{{confirmText}}</view>
				</view>
			</view>
		</view>
		<view class="page-bottom"></view>
		<view class="btn-group">
		  <view class="icon-group">
				<uni-icons class="icon-btn" type="chat" size="46" @click="toChat"></uni-icons>
			</view>
			<view v-if="!house.isCollect" class="confirmBtn button" @click="collect">收藏</view>
			<view v-else class="cancelBtn button" @click="cancelCollect">取消收藏</view>
		</view>
	</view>
</template>

<script>
	import config  from "@/config/app.js"
	export default {
		data() {
			return {
				id: "",
				house: {},
				isShowModal: false,
				reportReason: null
			};
		},
		methods: {
			getHouseDetail() {
				this.$request.request({
					url: "/house/detail",
					method: "GET",
					data: {
						id: this.id
					}
				}).then(res=>{
					if (res.code == 200) {
						this.house = res.data
						this.house.pic = JSON.parse(this.house.pic)
						// 为图片添加图片地址
						for (let i=0; i<this.house.pic.length; i++) {
							this.house.pic[i] = config.IMG_URL + this.house.pic[i]
						}
					} else if (res.code == 401) {
						uni.navigateTo({
							url: "../user/login"
						})
					}
				})
			},
			getImg: function(val) {
				console.log(val);
				const urls = this.house.pic;
			  const current = val;
				uni.previewImage({
					urls,
					current,
					longPressActions: {
			      itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
			      },
						fail: function(err) {
							console.log(err.errMsg);
						},
					}
			  });
			},
			back() {
				uni.navigateBack();
			},
			collect() {
				this.$request.request({
					url: "/house/collect",
					method: "POST",
					data: {
						houseId: this.id
					}
				}).then(res=>{
					console.log(res);
					if (res.data) {
						uni.showToast({
							title: "收藏成功",
							icon: "none"
						})
						this.getHouseDetail();
					} else {
						uni.showToast({
							title: "收藏失败，请重试",
							icon: "none"
						})
					}
				})
			},
			cancelCollect() {
				this.$request.request({
					url: "/house/cancelCollect",
					method: "POST",
					data: {
						houseId: this.id
					}
				}).then(res=>{
					console.log(res);
					if (res.data) {
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
						this.getHouseDetail();
					} else {
						uni.showToast({
							title: "取消失败，请重试",
							icon: "none"
						})
					}
				})
			},
			toChat() {
				uni.navigateTo({
					url: "../chat/chatPage?receiverId=" + this.house.userId
				})
			},
			toHomePage(id) {
				uni.navigateTo({
					url: "../user/homePage?userId=" + id
				})
			},
			showModal() {
				this.isShowModal = true;
			},
			handleCancel() {
				this.isShowModal = false;
				this.reportReason = '';
			},
			handleConfirm() {
				this.isShowModal = false;
				this.reportReason = this.reportReason.trim();
				if (this.reportReason.length <= 0) {
					uni.showToast({
						title: "请填写举报信息",
						icon: "none"
					}, 3000)
					return;
				}
				if (this.reportReason.length > 100) {
					uni.showToast({
						title: "内容过长，请删减部分举报内容",
						icon: "none"
					}, 3000)
					return;
				}
				this.$request.request({
					url: "/report/submit",
					method: "POST",
					data: {
						houseId: this.id,
						reason: this.reportReason
					}
				}).then(res=>{
					console.log(res);
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					// 举报成功清空理由
					if (res.code == 200) {
						this.reportReason = ''
					}
				})
			}
		},
		onLoad(option) {
			this.id = option.id;
		},
		onShow() {
			this.getHouseDetail();
		},
		props: {
			// 是否显示蒙层
			showMasking: {
				type: Boolean,
				default: true
			},
			// 蒙层背景色
			bgColor: {
				type: String,
				default: 'rgba(0,0,0,.6)'
			},
			// 模态框标题
			modalTitle: {
				type: String,
				default: ''
			},
			// 取消按钮文字
			cancelText: {
				type: String,
				default: '取消'
			},
			// 确定按钮文字
			confirmText: {
				type: String,
				default: '确定'
			},
			// 取消按钮文字颜色
			cancelTextColor: {
				type: String,
				default: '#666'
			},
			// 确定按钮文字颜色
			confirmTextColor: {
				type: String,
				default: '#5999FF'
			}
		},
	}
</script>

<style lang="scss" scoped>
	
	.detail-page {
		margin: 20rpx 0;
		
		.house-pic {
			width: 100%;
		}
		
		.house-info {
			margin: 10rpx;
			padding: 10rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			
			.display-bar {
				color: red;
				font-size: 20px;
				font-weight: 600;
				text-align: center;
			}
			
			.house-title {
				font-size: 20px;
				text-align: center;
				padding: 10rpx 0;
			}
			
			.house-user {
				font-size: 20px;
				text-align: center;
				padding: 10rpx 0;
				font-size: 18px;
				color: #56A5FB;
			}
			
			.info-item {
				width: 100%;
				margin: 10rpx;
				padding: 20rpx 0;
				
				.info-title {
					font-size: 16px
				}
				
				.info-input {
					width: 690rpx;
					min-height: 40rpx;
					word-wrap : break-word;
					text-align: justify;
					text-justify:inter-ideograph;
				}
			
			}
			
			.report-box {
				padding: 20rpx;
				
				.report-btn {
					width: 100%;
					color: #F6416C;
					text-align: right;
				}
			}
		}
		
		
	}
	.masking {
			height: 100vh;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
	
		.model-wraper {
			width: 600rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: absolute;
			z-index: 1000;
			top: 50%;
			left: 50%;
			margin-top: -161rpx;
			margin-left: -300rpx;
			box-shadow: #dcdcdc 0px 0px 20rpx;
		}
	
		.modal-title {
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #666;
		}
	
		.modal-body {
			padding: 30rpx 30rpx 80rpx 30rpx;
		}
	
		.btn {
			width: 300rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			float: left;
			border-top: 1rpx solid #ddd;
		}
	
		.btn.cancel {
			width: 299rpx;
			border-right: 1rpx solid #dcdcdc;
		}

</style>
